<template>
    <div class="wrapper">
        <a-card style="width: 80%">
            <div class="topics">
                <div class="topic">
                    <img src="/imgs/living.png" alt="living">
                    <h3>居住</h3>
                </div>
                <div class="topic">
                    <img src="/imgs/medical.png" alt="medical">
                    <h3>医药</h3>
                </div>
                <div class="topic">
                    <img src="/imgs/office.png" alt="office">
                    <h3>办公</h3>
                </div>
                <div class="topic">
                    <img src="/imgs/hotel.png" alt="hotel">
                    <h3>酒店</h3>
                </div>
                <div class="topic">
                    <img src="/imgs/culture.png" alt="culture">
                    <h3>文教</h3>
                </div>
                <div class="topic">
                    <img src="/imgs/industry.png" alt="industry">
                    <h3>工业</h3>
                </div>
                <div class="topic">
                    <img src="/imgs/business.png" alt="business">
                    <h3>商业</h3>
                </div>
                <div class="topic">
                    <img src="/imgs/administration.png" alt="administration">
                    <h3>市政</h3>
                </div>
            </div>
        </a-card>
        <div class="choose">
            <a-card title="价格查询" style="width: 80%">
                <a-collapse v-model:activeKey="activeKey">
                    <a-collapse-panel key="1" header="选择所在地域">
                        <a-space :size="[0, 8]" wrap>
                            <a-checkable-tag
                            v-for="(tag, index) in tagsData1"
                            :key="tag"
                            v-model:checked="selectTags1[index]"
                            @change="checked => handleChange1(tag, checked)"
                            >
                            {{ tag }}
                            </a-checkable-tag>
                        </a-space>
                    </a-collapse-panel>
                </a-collapse>
                <h1></h1>
                <a-form
                    :model="state.query"
                    name="basic"
                    :label-col="{ span: 4 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
                    @finish="onFinish"
                    @finishFailed="onFinishFailed"
                    style="width: 40%;"
                >
                    <a-form-item label="项目性质"
                        :rules="[{ required: true, message: '请输入项目性质!' }]"
                    >
                        <a-checkbox-group v-model:value="state.query.projectNature">
                            <a-checkbox value="1" name="type">新建项目</a-checkbox>
                            <a-checkbox value="2" name="type">扩建项目</a-checkbox>
                            <a-checkbox value="3" name="type">改建项目</a-checkbox>
                            <a-checkbox value="4" name="type">迁建项目</a-checkbox>
                        </a-checkbox-group>
                    </a-form-item>
                    
                    <a-form-item
                        label="结构类型"
                        name="span"
                        :rules="[{ required: true, message: '请输入结构类型!' }]"
                    >
                        <a-input v-model:value="state.query.structureType" />
                    </a-form-item>

                    <a-form-item label="报价截止日期">
                        <a-date-picker v-model:value="state.query.pricingTime"/>
                    </a-form-item>
                </a-form>
                <a-input-search
                    v-model:value="state.query.search"
                    placeholder="input search text"
                    enter-button
                    @search="onSearch"
                    style="width: 300px;"
                />
            </a-card>
        </div>
        <div class="table">
            <a-list item-layout="horizontal" :data-source="state.data" size="large">
                <template #renderItem="{ item }">
                    <a-list-item>
                        <div style="width: 80vw;">
                            <a-list-item-meta>
                                <template #title>
                                    <a @click="showModal" style="font-size: large;">{{ item.name }}</a>
                                </template>
                            </a-list-item-meta>
                            <a-table :columns="columns" :data-source="[item]" bordered style="width: 100%;" :pagination="false">
                                <template #bodyCell="{ column, text }">
                                    <template v-if="column.dataIndex === 'name'">
                                        <a>{{ text }}</a>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </a-list-item>
                </template>
            </a-list>
        </div>
    </div>
    <div>
        <a-modal :forceRender=true v-model:open="open" title="Basic Modal" @ok="handleOk"
        width="80%" :style="{ top: '20px'}">
            <div style="height: 700px; overflow: scroll; display: flex; flex-direction: column; align-items: center;">
                <div style="width: 100%; height: 500px; position: relative;">
                    <div style="width: 20%; height: 100%; position: absolute; left: 0; background-color: aqua;"></div>
                    <div id="myChart"></div>
                </div>
                <div style="width: 100%; height: 200px;">
                    <!-- <a-table :columns="columnsOfTrends" :data-source="state.dataOfTrends" bordered style="width: 100%;">
                        <template #bodyCell="{ column, text }">
                        <template v-if="column.dataIndex === 'name'">
                            <a>{{ text }}</a>
                        </template>
                        </template>
                        <template #title>Header</template>
                        <template #footer>Footer</template>
                    </a-table> -->
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
    import { ref, watch, reactive } from 'vue'

    const state = reactive({})

    //下拉标签页
    state.query = {
        name: '',
        area: '',
        firstName: '',
        secondName: ''
    }

    const activeKey = ref(['1'])

    state.tagsData1 = reactive(['武汉市','黄石市','鄂州市','黄冈市','宜昌市','襄阳市','十堰市','孝感市','荆门市','咸宁市','随州市','恩施市','天门市','潜江市','仙桃市','荆州市','神农架林区'])
    state.selectTags1 = reactive([])

    const handleChange1 = (tag, checked) => {
        state.selectTags1 = state.tagsData1.map((item, key) => {
            if (tag == item){
                state.query.area = tag
                return true
            }
            else return false
        })
    }

    //查询
    const onSearch = () => {
        console.log(state.query)
    }


    //表格展示
    const columns = [
    {
        title: '项目类别',
        dataIndex: 'projectCategory',
    },
    {
        title: '计价时间',
        dataIndex: 'pricingTime',
    },
    {
        title: '项目性质',
        dataIndex: 'projectNature',
    },
    {
        title: '结构类型',
        dataIndex: 'structureType',
    },
    {
        title: '建筑面积',
        dataIndex: 'coveredArea',
    },
    {
        title: '地上层数',
        dataIndex: 'above',
    },
    {
        title: '地下层数',
        dataIndex: 'underground',
    },
    {
        title: '交付方式',
        dataIndex: 'worksAreas',
    }
    ]

    //弹窗
    const open = ref(false)
    const showModal = () => {
        open.value = true
    }
    const handleOk = e => {
        console.log(e)
        open.value = false
    }

    import http from '../utils/axios'
    const getProjects = async () => {
        const projects = await http.get('/digital/costIndex/list')
        return projects
    }


    import { onMounted } from 'vue'
    onMounted(() => {
        getProjects().then((res) => {
            state.data = res.data.result.records
            console.log(state.data)
        })
    })
</script>

<style scoped>
.wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.choose{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.table{
    width: 80%;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    background-color: white;
    border-radius: 8px;
    margin: 10px;
}
.topics{
    width: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: space-between;
    margin: 0 auto;
}
img{
    width: 80px;
    height: 77.5px;
}
.topic{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}
</style>